/*
 * Created by Administrator on 2017/2/22.
 */
/**
 * DatePicker组件
 *
 * @class DatePicker
 * @extends Basic
 *
 * @param [curDate] 当前日期
 * @param [placeholder] 输入框提示
 * @param [name] 输入框name
 * @param [format] 日期格式
 * @param [time] 是否显示时间
 *
 * 示例:
 *
 *     @example
 *
 *
 *		 var curDate = "2017-04-12 12:03:12";  //自定义日期（可选项）
 *       var placeholder = "请选择日期";  //输入框提示语（可选项）
 *       var name = "mydate";    //输入框input name 配置 （可选项）
 *       var format = "yyyy-mm-dd";  //日期格式（"yyyy/mm/dd"）
 *       var time = true;       //是否显示时间
 *       var onchange = function(){ //回调函数
 *          console.log(123);
 *       }
 *
 *
 *     <DatePicker curDate={curDate} placeholder={placeholder} name={name} format={format} time={time} onchange={onchange}/>
 */
var MyDate = require("./helpers");
var Calendar = require('./calendar');
var DatePicker = React.createClass({
    getDefaultProps:function(){
        return{
            curDate: "",
            placeholder: "请选择日期",
            name: "",
            format: "yyyy-mm-dd"
        }
    },
    getInitialState: function () {
        return {

        }
    },
    componentDidMount: function(){

    },
    renderLayer: function(){
        var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
        var scrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;
        var style = {top:+ (this.refs["ucs-calendar-picker-input"].getBoundingClientRect().top+scrollTop)+"px",
            left:+(this.refs["ucs-calendar-picker-input"].getBoundingClientRect().left+scrollLeft)+"px"};
        return (
            <div>
                <Calendar curDate={this.refs['ucs-calendar-picker-input'].value} maxDate={this.props.maxDate} minDate={this.props.minDate} callBack={this.callBack.bind(this)} style={style} time={this.props.time}/>
            </div>
        );
    },
    _renderLayer: function() {
        var layerElement = this.renderLayer();

        if (layerElement === null) {
            ReactDOM.render(<noscript />, this._layer);
        } else {
            ReactDOM.render(layerElement, this._layer);
        }
    },
    clickHandler: function(e){
        if(e&&e.stopPropagation){
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }else{
            //否则我们使用ie的方法来取消事件冒泡
            window.event.cancelBubble = true;
        }
        if(document.getElementById("datePickerLayerId")){
            document.body.removeChild(document.getElementById("datePickerLayerId"));
        }
        this._layer = document.createElement('div');
        this._layer.id = "datePickerLayerId";
        document.body.appendChild(this._layer);
        this._renderLayer();
        /*if (document.addEventListener) {
            document.addEventListener('click', this.onDocumentClick.bind(this));
        } else {
            document.attachEvent('click', this.onDocumentClick.bind(this));
        }*/
        EventListener.addEventHandler(document,'onclick',this.onDocumentClick.bind(this));
    },
    onDocumentClick: function(){
        /*if(this._layer){
         document.body.removeChild(this._layer);
         this._layer = null;
         }*/
        if(document.getElementById("datePickerLayerId")){
            document.body.removeChild(document.getElementById("datePickerLayerId"));
            this._layer = null;
        }
    },
    callBack: function(curDate,curTime){
        if(this.props.format.indexOf("-")>0){
            if(this.props.time){
                this.refs["ucs-calendar-picker-input"].value = curDate.replace(/\//g,"-")+" "+curTime;
            }else{
                this.refs["ucs-calendar-picker-input"].value = curDate.replace(/\//g,"-");
            }
        }else{
            if(this.props.time){
                this.refs["ucs-calendar-picker-input"].value = curDate+" "+curTime;
            }else{
                this.refs["ucs-calendar-picker-input"].value = curDate;
            }
        }
        if(this._layer){
            document.body.removeChild(this._layer);
            this._layer = null;
        }
        if(this.props.onchange){
            this.props.onchange(this.refs["ucs-calendar-picker-input"].value);
        }
    },
    /**
     * 获取被选的值
     * @return {string}
     * */
    getValue: function(){
        return this.refs['ucs-calendar-picker-input'].value;
    },
    mouseOverHandler: function(){
       if(this.refs['ucs-calendar-picker-input'].value!=""){
           MyDate.removeClass(this.refs['ucs-calendar-picker-icon'],'icon-rili');
           MyDate.addClass(this.refs['ucs-calendar-picker-icon'],'icon-error');
       }
    },
    mouseOutHandler: function(){
        MyDate.removeClass(this.refs['ucs-calendar-picker-icon'],'icon-error');
        MyDate.addClass(this.refs['ucs-calendar-picker-icon'],'icon-rili');
    },
    clearValue: function(){
        if(MyDate.hasClass(this.refs['ucs-calendar-picker-icon'],'icon-error')){
            this.refs['ucs-calendar-picker-input'].value = "";
            if(this.props.onchange){
                this.props.onchange(this.refs["ucs-calendar-picker-input"].value);
            }
            MyDate.removeClass(this.refs['ucs-calendar-picker-icon'],'icon-error');
            MyDate.addClass(this.refs['ucs-calendar-picker-icon'],'icon-rili');
        }else{
            this.clickHandler();
        }
    },
    _handle: function (e) {
        var _nodeSpan = e.target || e.srcElement;
        _nodeSpan.className = "ucs-calendar-placeholder hide";
        this.clickHandler();
    },
    _placeholder: function (_this) {
        if (!('placeholder' in document.createElement('input'))&&!_this.props.curDate) {
            return (
                <span className="ucs-calendar-placeholder" onClick={_this._handle}>{_this.props.placeholder}</span>
            );
        } else {
            return "";
        }
    },
    render: function() {
        var _this = this;
        return (
            <span className="ucs-calendar-picker">
                <span onMouseover={_this.mouseOverHandler.bind(_this)} onMouseout={_this.mouseOutHandler.bind(_this)}>
                    <input value={_this.props.curDate} placeholder={_this.props.placeholder} name={_this.props.name} ref="ucs-calendar-picker-input" className="ucs-calendar-picker-input" onClick={_this.clickHandler.bind(_this)}/>
                    <span onClick={_this.clearValue.bind(_this)} ref="ucs-calendar-picker-icon" className="ucs-calendar-picker-icon iconfont icon-rili"></span>
                </span>
                {_this._placeholder(_this)}
            </span>
        );
    }
})

module.exports = DatePicker;